<%--
  Created by IntelliJ IDEA.
  User: KK
  Date: 2022/11/16
  Time: 19:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="stylesheet" href="CSS/formatter.css" type="text/css">
<html>
<head>
    <title>注册</title>
</head>
<body>
<div>
    <form action="/RegisterServlet" method="post">
        <table border="0px" align="center">
            <thead>
            <tr>
                <td colspan="2" style="text-align: center">新增用户</td>
            </tr>
            </thead>
            <tr>
                <td class="fontPosition">账号：</td>
                <td><input type="text" required id="username" name="username" onblur="checkedUser()"><span class="spanFont">*</span></td>
            </tr>
            <tr>
                <td class="fontPosition">密码：</td>
                <td><input type="password" required id="password" name="password" onblur="checkPassword()"><span class="spanFont">*</span></td>
            </tr>
            <tr>
                <td class="fontPosition">确认密码：</td>
                <td><input type="password" required id="repassword" onblur="checkRePassword()"><span class="spanFont">*</span></td>
            </tr>
            <tr>
                <td class="fontPosition">手机号：</td>
                <td><input type="text" required id="phone" name="phone" onblur="checkPhone()"><span class="spanFont">*</span></td>
            </tr>
            <tr>
                <td class="fontPosition">地址：</td>
                <td>
                    <select name="province" id="adress" onblur="checkCity()">
                        <option value="深圳">深圳</option>
                        <option value="上海">上海</option>
                        <option value="北京">北京</option>
                        <option value="广州">广州</option>
                    </select>
                    <span class="spanFont">*</span>
                </td>
            </tr>
            <tr>
                <td style="text-align: center" colspan="2"><input type="submit" id="submit1" onclick="return checkedForm()">
                    <input type="reset">
                </td>
            </tr>
            <tr>
                <td></td>
                <td style="color: red"><h7>${msg}</h7></td>
            </tr>
        </table>
    </form>
</div>
<script type="text/javascript">
    let spanTags = document.getElementsByTagName("span");
    let username = document.getElementById("username");
    let password = document.getElementById("password");
    let repassword = document.getElementById("repassword");
    let phone = document.getElementById("phone");
    function checkedUser() {
        var reg = /^[A-Za-z0-9]{1,20}$/;
        if (reg.test(username.value)) {
            spanTags[0].style.color = "green";
            spanTags[0].innerText = "√用户名可用";
            return true;
        } else {
            spanTags[0].style.color = "red";
            spanTags[0].innerText = "×用户名必须8-20位！且只能包含数字和字母";
            return false;
        }
    }

    function checkPassword() {
        var reg = /^[A-Za-z0-9！@#￥%*$&*{}?.。\|"‘’']{1,16}$/;
        if (reg.test(password.value)) {
            spanTags[1].style.color = "green";
            spanTags[1].innerText = "√";
            return true;
        } else {
            spanTags[1].style.color = "red";
            spanTags[1].innerText = "x密码必须8-12位";
            return false;
        }
    }

    function checkRePassword() {
        if (password.value == (repassword.value)) {
            spanTags[2].style.color = "green";
            spanTags[2].innerText = "√";
            return true;
        } else if (repassword.value==""){
            spanTags[2].style.color = "red";
            spanTags[2].innerText = "*";
            return false
        }else {
            spanTags[2].style.color = "red";
            spanTags[2].innerText = "x两次密码不一致";
            return false;
        }
    }

    function checkPhone() {
        var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
        if (reg.test(phone.value)) {
            spanTags[3].style.color = "green";
            spanTags[3].innerText = "√";
            return true;
        } else {
            spanTags[3].style.color = "red";
            spanTags[3].innerText = "x手机号码不正确";
            return false;
        }
    }
    function checkCity() {
        let phone = document.getElementById("adress").value;
        if (phone!=""){
            spanTags[4].style.color = "green";
            spanTags[4].innerText = "√";
            return true;
        }else {
            spanTags[4].style.color = "red";
            spanTags[4].innerText = "地址不能为空";
            return false;
        }
    }
    function checkedForm() {
        if (checkCity()&&checkRePassword()&&checkedUser()&&checkPhone()&&checkPassword()){
            return true;
        }else {
            alert("信息填写不完整或填写错误，无法提交")
            return false;
        }
    }
</script>
</body>
</html>
